<template>
  <div class="dashboard-container">
    <!-- 公司名称 -->
    <div class="company-title">
      <h1>{{ setting_info.comTitle }}</h1>
    </div>
    <!-- 公司名称 -->

    <!-- 实时数据 -->
    <div class="data-group-card">
      <!-- <div class="data-block" style="width: 70%">
        <h1>实时数据</h1>
        <div class="data-card-group">
          <div class="data-real-card">
            <div class="card-title">订单金额</div>
            <div class="card-value">¥ {{ num.dayOrderPrice }}</div>
            <div class="card-subtitle">昨日¥ {{ num.dayOrderPrice1 }}</div>
          </div>
          <div class="data-real-card">
            <div class="card-title">订单数量</div>
            <div class="card-value">{{ num.orderNum }}</div>
            <div class="card-subtitle">昨日{{ num.dayOrderNum1 }}</div>
          </div>
          <div class="data-real-card">
            <div class="card-title">待发货订单</div>
            <div class="card-value">{{ num.needFahuo }}</div>
          </div>
        </div>
      </div> -->
      <!-- 公告 -->
      <div class="data-announcement announcement" style="width: 30%">
        <h1>公告</h1>
        <div class="enlarged-notice-block">
          <ul class="notice-list" @click="do_to_news">
            <li>{{ notice.title }}</li>
            <!-- <li>{{ notice.title }}</li> -->
          </ul>
          <!-- <a href="#" class="more-btn">查看更多</a> -->
        </div>
      </div>
      <!-- 公告 -->
    </div>
    <!-- 实时数据 -->

    <!-- 商品数据 -->
    <!-- <div class="data-block">
      <h1>商品数据</h1>
      <div class="data-card-group">
        <div class="data-card">
          <div class="card-title">商品总数</div>
          <div class="card-value back-text">{{ num.productNum }}</div>
        </div>
        <div class="data-card">
          <div class="card-title">售卖中</div>
          <div class="card-value back-text">{{ num.shangjiaNum }}</div>
        </div>
        <div class="data-card">
          <div class="card-title">已下架</div>
          <div class="card-value back-text">{{ num.daiShangjiaNum }}</div>
        </div>
      </div>
    </div> -->
    <!-- 商品数据 -->

    <!-- 财务数据 -->
    <!-- <div class="data-block">
      <h1>财务数据</h1>
      <div class="data-card-group">
        <div class="data-card">
          <div class="card-title">待开票金额</div>
          <div class="card-value back-text">¥ {{ num.invoiceUnOpen }}</div>
        </div>
        <div class="data-card">
          <div class="card-title">已开票金额</div>
          <div class="card-value back-text">¥ {{ num.invoiceHadOpen }}</div>
        </div>
        <div class="data-card">
          <div class="card-title">累计金额</div>
          <div class="card-value back-text">{{ num.invoiceTotal }}</div>
        </div>
      </div>
    </div> -->
    <!-- 财务数据 -->
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      setting_info: {},
      num: {},
      notice: "",
    };
  },
  computed: {},
  watch: {},
  created() {
    this.query_config();
    this.fiflet();
  },
  mounted() {},
  methods: {
    query_config() {
      this.$api({
        url: "/admin_service.php",
        method: "get",
        data: {
          action: "setting_getConfig",
        },
      }).then((res) => {
        if (res.code == 200) {
          this.setting_info = res.data;
        }
      });
    },
    fiflet() {
      this.$api({
        url: "/admin_service.php",
        method: "get",
        data: {
          action: "data_tongjiNew",
        },
      }).then((res) => {
        let data = res.data;
        if (res.code == 200) {
          this.num = data;
        }
      });

      this.$api({
        url: "/admin_service.php",
        method: "get",
        data: {
          action: "news_getNewList",
          channelId: 58,
        },
      }).then((res) => {
        let data = res.data;
        if (res.code == 200) {
          this.notice = data.list[0];
        }
      });
    },

    do_to_news() {
      this.$router.push({
        path: "/news-list",
        query: {
          channelId: 97,
        },
      });
    },
  },
};
</script>

<style scoped lang="less">
.dashboard-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.company-title {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;

  h1 {
    font-size: 21px;
  }
}

.data-block {
  background: #fff;
  padding: 20px 40px;
  border-radius: 10px;
  margin-bottom: 20px;

  h1 {
    margin-bottom: 10px;
    font-size: 21px;
  }
}

.data-announcement {
  background: #fff;
  padding: 25px;
  border-radius: 10px;
  margin-bottom: 20px;

  h1 {
    margin-bottom: 10px;
    font-size: 21px;
  }
}

.data-card-group {
  display: flex;
  gap: 30px;
}

.data-group-card {
  display: flex;
  gap: 20px;
}

.data-card {
  background: #ecf0f5;
  padding: 25px 35px;
  border-radius: 8px;
  width: 24%;
  //min-width: 260px;

  .back-text {
    color: #040509;
    font-size: 18px;
  }
}

.data-real-card {
  background: #ecf0f5;
  padding: 25px 35px;
  border-radius: 8px;
  width: 32%;
  //min-width: 260px;

  .back-text {
    color: #040509;
    font-size: 18px;
  }
}

.card-title {
  color: #333;
  font-size: 17px;
  margin-bottom: 10px;
}

.card-value {
  color: #4a90e2;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-subtitle {
  color: #999;
  font-size: 14px;
}

.notice-list {
  cursor: pointer;
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.notice-list li {
  max-width: 250px;
  color: #959595;
  font-size: 16px;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.more-btn {
  color: #999;
  font-size: 12px;
  text-decoration: none;
}
</style>